<template>
	<div class="buthover is-bor is-cur"
		:class="showMobile?'buthovers':'buthover'">
		<div class="buthover-bg"></div>
		<div class="p">{{title}}</div>
	</div>
</template>

<script lang="ts" setup>
	import { isMobile } from '@/utils/index'
	const {
		title
	} = defineProps({
		title: {
			type: String
		},

	})
	const showMobile = ref(null)
	onMounted(() => {
		showMobile.value = isMobile() //true 移动端 false pc
	})
</script>

<style lang="scss" scoped>
	$color: #ea5514;
	$min-width:117px;
	$min-hight:33px;

	.buthover {
		background-color: #fff;
		overflow: hidden;
		width: 180px;
		position: absolute;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		text-align: center;

		&:hover {
			.buthover-bg {
				background-color: $color;
				transition: 500ms;
				transform: translateX(0px);
			}

			.p {
				color: aliceblue;
			}
		}

		.buthover-bg {
			position: absolute;
			transition: 500ms;
			transform: translateX(-180px);
			width: 180px;
			height: 40px;
		}

		.p {
			position: absolute;
			width: 180px;
			height: 40px;
			z-index: 2;
			text-align: center;
		}
	}
	.buthovers {
		background-color: #fff;
		overflow: hidden;
		width: $min-width;
		position: absolute;
		height:$min-hight;
		line-height:$min-hight;
		font-size:10px;
		border-radius: 5px;
		text-align: center;
		color: $color;
	
		&:hover {
			.buthover-bg {
				background-color: $color;
				transition: 500ms;
				transform: translateX(0px);
			}
	
			.p {
				color: aliceblue;
			}
		}
	
		.buthover-bg {
			position: absolute;
			transition: 500ms;
			transform: translateX(-$min-width);
			width:$min-width;
			height:$min-hight;
		}
	
		.p {
			position: absolute;
			width: $min-width;
			height: $min-hight;
			z-index: 2;
			text-align: center;
		}
	}
</style>